<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZXD</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>

<script type="text/javascript">
    //var titleName = [];
    //var data1 = [];

    let titleName = [];
    let totalnumber = [];

    $.ajax({
        url: "/getGzhList",         //设置数据访问接口
        method:"PUT",
        dataType:"json",
        async:false,
        success:function (data) {
            for (let i = 0; i < data.length; i++){
                titleName.push(data[i].name);
                totalnumber.push(data[i].value);
            }
        },
        error :function(errorMsg) {//请求失败执行的方法
            alert("获取后台数据失败！");
        }
    });
    console.log("获取所有的标题"+titleName);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var rich = {
        white: {
            color: '#ddd',
            align: 'center',
            padding: [5, 0]
        }
    };
    var placeHolderStyle = {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0
        }
    };
    var hdata = [];
    for (var i = 0; i < titleName.length; i++) {
        hdata.push({
            value: totalnumber[i],
            name: titleName[i],
            itemStyle: {
                normal: {
                    borderWidth: 5,
                    shadowBlur: 30,
                    borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                        offset: 0,
                        color: '#7777eb'
                    }, {
                        offset: 1,
                        color: '#70ffac'
                    }]),
                    shadowColor: 'rgba(142, 152, 241, 0.6)'
                }
            }
        }, {
            value: 1,
            name: '',
            itemStyle: placeHolderStyle
        });
    }
    var seriesObj = [{
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [195, 200],
        hoverAnimation: false,
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                        var percent = 0;
                        var total = 0;
                        for (var j = 0; j < totalnumber.length; j++) {
                            total += totalnumber[j];
                        }
                        percent = (( params.value/ total) * 100).toFixed(0);
                        if(params.name !== '') {
                            return params.name + '\n{white|' + '占比' + percent + '%}';
                        }else {
                            return '';
                        }
                    },
                    rich: rich
                },
                labelLine: {
                    show: false
                }
            }
        },
        data: hdata
    }];
    option = {
        backgroundColor: '#04243E',
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        toolbox: {
            show: false
        },
        series: seriesObj
    }


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>